@use 'sass:color';

.Calendar {
  // padding: 10px 5px;

  &__head {
    padding: 10px 30px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    &__text {
      font-size: 32px;
      color: $duxappTextColor1;
    }

    &__icon {
      font-size: 32px;
      color: $duxappTextColor1;
    }
  }

  &__row {
    flex-direction: row;

    &__item {
      flex: 1;
      justify-content: center;
      align-items: center;
      height: 120px;

      &--head {
        height: 80px;
      }

      &__select {
        position: absolute;
        top: 5px;
        height: 110px;
        background-color: $duxappPrimaryColor;

        &--select {
          left: 5px;
          right: 5px;
          border-radius: 16px;
        }

        &--start {
          left: 5px;
          right: -1px;
          border-radius: 16px 0 0 16px;
        }

        &--end {
          left: -1px;
          right: 5px;
          border-radius: 0 16px 16px 0;
        }

        &--center {
          left: -1px;
          right: -1px;
          opacity: 0.3;
          // background-color: color.adjust($duxappPrimaryColor, $lightness: 30%);
        }
      }

      &__custom {
        position: absolute;
        top: 5px;
        height: 110px;

        &--select {
          left: 5px;
          right: 5px;
          border-radius: 16px;
        }

        &--start {
          left: 5px;
          right: -1px;
          border-radius: 16px 0 0 16px;
        }

        &--end {
          left: -1px;
          right: 5px;
          border-radius: 0 16px 16px 0;
        }

        &--center {
          left: -1px;
          right: -1px;
        }
      }

      &__other {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 5px;
        justify-content: space-between;

        &__item {
          height: 46px;
          align-items: center;
          justify-content: center;
        }
      }

      &__text {
        color: $duxappTextColor1;
        font-size: 28px;
        z-index: 1;
        width: 100%;
        text-align: center;

        &--disable {
          color: $duxappTextColor3;
        }
      }
    }
  }
}
